import { PlusOutlined } from '@ant-design/icons'
import { Button, message, Input, Drawer, Tree, Modal } from 'antd'
import React, { useState, useRef, useEffect } from 'react'
import { useIntl, FormattedMessage } from 'umi'
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout'
import { all } from '@/services/area/api'

const { Search } = Input

const x = 3
const y = 2
const z = 1
const gData = []

const generateData = (_level, _preKey, _tns) => {
  const preKey = _preKey || '0'
  const tns = _tns || gData

  const children = []
  for (let i = 0; i < x; i++) {
    const key = `${preKey}-${i}`
    tns.push({ title: key, key })
    if (i < y) {
      children.push(key)
    }
  }
  if (_level < 0) {
    return tns
  }
  const level = _level - 1
  children.forEach((key, index) => {
    tns[index].children = []
    return generateData(level, key, tns[index].children)
  })
}
generateData(z)

const dataList = []
const generateList = data => {
  for (let i = 0; i < data.length; i++) {
    const node = data[i]
    const { key } = node
    dataList.push({ key, title: key })
    if (node.children) {
      generateList(node.children)
    }
  }
}
generateList(gData)

const getParentKey = (key, tree) => {
  let parentKey
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i]
    if (node.children) {
      if (node.children.some(item => item.key === key)) {
        parentKey = node.key
      } else if (getParentKey(key, node.children)) {
        parentKey = getParentKey(key, node.children)
      }
    }
  }
  return parentKey
}

const TableList = () => {
  const treeData = [
    {
      title: '0-0',
      key: '0-0',
      children: [
        {
          title: '0-0-0',
          key: '0-0-0',
          children: [
            {
              title: '0-0-0-0',
              key: '0-0-0-0',
            },
            {
              title: '0-0-0-1',
              key: '0-0-0-1',
            },
            {
              title: '0-0-0-2',
              key: '0-0-0-2',
            },
          ],
        },
        {
          title: '0-0-1',
          key: '0-0-1',
          children: [
            {
              title: '0-0-1-0',
              key: '0-0-1-0',
            },
            {
              title: '0-0-1-1',
              key: '0-0-1-1',
            },
            {
              title: '0-0-1-2',
              key: '0-0-1-2',
            },
          ],
        },
        {
          title: '0-0-2',
          key: '0-0-2',
        },
      ],
    },
    {
      title: '0-1',
      key: '0-1',
      children: [
        {
          title: '0-1-0-0',
          key: '0-1-0-0',
        },
        {
          title: '0-1-0-1',
          key: '0-1-0-1',
        },
        {
          title: '0-1-0-2',
          key: '0-1-0-2',
        },
      ],
    },
    {
      title: '0-2',
      key: '0-2',
    },
  ]

  const [isModalVisible, setIsModalVisible] = useState(false)

  const [expandedKeys, setExpandedKeys] = useState(['0-0-0', '0-0-1'])
  const [checkedKeys, setCheckedKeys] = useState(['0-0-0'])
  const [selectedKeys, setSelectedKeys] = useState([])
  const [myData, setMyData] = useState(treeData)
  const [searchValue, setSearchValue] = useState('')
  const [autoExpandParent, setAutoExpandParent] = useState(true)
  useEffect(() => {
    const msg = (async function anyNameFunction () {
      const msg = await all({
        page: 1,
        pageSize: 10,
      })
      setMyData(msg)
      console.log(msg)
    })()

    // const data =  all();

    console.log(msg)
  }, [])
  // ---
  const showModal = () => {
    setIsModalVisible(true)
  }

  const handleOk = () => {
    setIsModalVisible(false)
  }

  const handleCancel = () => {
    setIsModalVisible(false)
  }

  //   --

  const onExpand = expandedKeysValue => {
    console.log('onExpand', expandedKeysValue) // if not set autoExpandParent to false, if children expanded, parent can not collapse.
    // or, you can remove all expanded children keys.

    setExpandedKeys(expandedKeysValue)
    setAutoExpandParent(false)
  }

  const onCheck = checkedKeysValue => {
    console.log('onCheck', checkedKeysValue)
    setCheckedKeys(checkedKeysValue)
  }

  const onSelect = (selectedKeysValue, info) => {
    console.log('onSelect', info)
    setSelectedKeys(selectedKeysValue)
  }

  const onChange = e => {
    const { value } = e.target
    console.log(value)
    const expandedKeys = myData
      .map(item => {
        if (item.title.indexOf(value) > -1) {
          console.log(item)
          return getParentKey(item.key, gData)
        }
        return null
      })
      .filter((item, i, self) => item && self.indexOf(item) === i)
    console.log(expandedKeys)
    setSearchValue(value)
    setExpandedKeys(expandedKeys)
    // this.setState({
    //   expandedKeys,
    //   searchValue: value,
    //   autoExpandParent: true,
    // })
  }

  return (
    <PageContainer>
      <Button type='primary' onClick={showModal}>
        Open Modal
      </Button>
      <Modal title='Basic Modal' visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} bodyStyle={{height: 300}}>
        <Search style={{ marginBottom: 8 }} placeholder='Search' onChange={onChange} />
        <Tree
        height={233}
          checkable
          onExpand={onExpand}
          expandedKeys={expandedKeys}
          autoExpandParent={autoExpandParent}
          onCheck={onCheck}
          checkedKeys={checkedKeys}
          onSelect={onSelect}
          selectedKeys={selectedKeys}
          treeData={myData}
        />
      </Modal>
    </PageContainer>
  )
}

export default TableList

// 970 300

// 1940 900

// 2910 2100

// 3880 3300
